<template>
  <div class="user-container">
    <!-- <a href="#" @click.prevent="getDetails(item.id)">详情</a> -->
    <el-button type="primary" class="add" @click="dialogVisible = true"
      >添加新用户</el-button
    >
    <!-- 用户采集的表单 -->
    <el-dialog
      title="添加新用户"
      :visible.sync="dialogVisible"
      width="50%"
      @close="onDialogClose"
    >
      <el-form :model="form" :rules="rules" ref="myaddForm">
        <el-form-item label="名字" prop="username" label-width="80px">
          <el-input v-model.trim="form.username"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="college" label-width="80px">
          <el-select v-model="form.college" placeholder="请选择学院">
            <el-option label="空港管理学院" value="空港管理学院"></el-option>
            <el-option label="空乘学院" value="空乘学院"></el-option>
            <el-option label="空保学院" value="空保学院"></el-option>
            <el-option label="民航安全学院" value="民航安全学院"></el-option>
            <el-option label="机务学院" value="机务学院"></el-option>
            <el-option label="五专学院" value="五专学院"></el-option>
          </el-select>
        </el-form-item>
        <!-- 头衔 -->
        <el-form-item label="身份" prop="role" label-width="80px">
          <el-select v-model="form.role" placeholder="请选择身份">
            <el-option label="学生" value="学生"></el-option>
            <el-option label="教师" value="教师"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major" label-width="80px">
          <el-select v-model="form.major" placeholder="请选择专业">
            <el-option
              label="移动互联网应用技术"
              value="移动互联网应用技术"
            ></el-option>
            <el-option
              label="人工智能技术服务"
              value="人工智能技术服务"
            ></el-option>
            <el-option
              label="大数据与财务管理"
              value="大数据与财务管理"
            ></el-option>
            <el-option
              label="计算机应用技术"
              value="计算机应用技术"
            ></el-option>
            <el-option
              label="虚拟现实应用技术"
              value="虚拟现实应用技术"
            ></el-option>
            <el-option label="电子商务" value="电子商务"></el-option>
            <el-option
              label="机场运行服务与管理"
              value="机场运行服务与管理"
            ></el-option>
            <el-option label="民航运输服务" value="民航运输服务"></el-option>
            <el-option label="航空物流管理" value="航空物流管理"></el-option>
            <el-option
              label="民航空中安全保卫"
              value="民航空中安全保卫"
            ></el-option>
            <el-option label="空中乘务" value="空中乘务"></el-option>
            <el-option label="应急救援技术" value="应急救援技术"></el-option>
            <el-option label="航空油料" value="航空油料"></el-option>
            <el-option
              label="民航安全技术管理"
              value="民航安全技术管理"
            ></el-option>
            <el-option
              label="直升机驾驶技术"
              value="直升机驾驶技术"
            ></el-option>
            <el-option
              label="定翼机驾驶技术"
              value="定翼机驾驶技术"
            ></el-option>
            <el-option
              label="飞行器数字化制造技术"
              value="飞行器数字化制造技术"
            ></el-option>
            <el-option
              label="无人机应用技术"
              value="无人机应用技术"
            ></el-option>
            <el-option
              label="飞机机电设备维修"
              value="飞机机电设备维修"
            ></el-option>
            <el-option
              label="通用航空航务技术"
              value="通用航空航务技术"
            ></el-option>
            <el-option
              label="通用航空器维修"
              value="通用航空器维修"
            ></el-option>
            <el-option
              label="无人机操控与维护"
              value="无人机操控与维护"
            ></el-option>
            <el-option
              label="智慧健康养老服务"
              value="智慧健康养老服务"
            ></el-option>
            <el-option label="电子技术应用" value="电子技术应用"></el-option>
            <el-option label="铁道运输服务" value="铁道运输服务"></el-option>
            <el-option label="民航运输服务" value="民航运输服务"></el-option>
            <el-option label="飞机设备维修" value="飞机设备维修"></el-option>
            <el-option label="航空服务" value="航空服务"></el-option>
            <el-option
              label="旅游服务与管理"
              value="旅游服务与管理"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="classes" label-width="80px">
          <el-input
            v-model.trim="form.classes"
            title="格式:21级移动互联网应用技术1班"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobilePhone" label-width="80px">
          <el-input v-model.trim="form.mobilePhone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="80px">
          <el-input v-model.trim="form.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddNewUser">确 定</el-button>
      </span>
    </el-dialog>
    <el-table :data="userlist" border style="width: 1250px" class="table">
      <!-- <el-table-column prop="id" label="id" width="80"> </el-table-column> -->
      <el-table-column prop="username" label="姓名" width="100">
      </el-table-column>
      <el-table-column prop="college" label="学院" width="180">
      </el-table-column>
      <el-table-column prop="major" label="专业" width="170"> </el-table-column>
      <el-table-column prop="classes" label="班级" width="200">
      </el-table-column>
      <el-table-column prop="role" label="身份" width="50"> </el-table-column>
      <el-table-column prop="mobilePhone" label="手机号" width="150">
      </el-table-column>
      <el-table-column label="修改密码">
        <template #default="{ row }">
          <!-- 修改密码 -->
          <input
            type="text"
            class="modify"
            title="敲击回车修改密码"
            @keydown.enter="preservation(row.mobilePhone, $event)"
          />
        </template>
      </el-table-column>
      <el-table-column label="删除用户" align="center">
        <template #default="{ row }">
          <div>
            <a href="#" @click.prevent="onRemove(row.mobilePhone)">删除 -- {{row.mobilePhone}}</a>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getStudentListAPI } from '@/api/StudentListAPI'
import { getChangePassword } from '@/api/ChangePasswordAPI'
import { getAddUsersAPI } from '@/api/AddUsersAPI'
import { getResetPasswordAPI } from '@/api/ResetPasswordAPI'
import request from '@/untils/request'
export default {
  created() {
    this.initStudnetList()
  },
  data() {
    const checkmobilePhone = (rule, value, callback) => {
      const phone =
        /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
      if (!value.trim()) {
        callback(new Error('请输入手机号'))
      } else if (value.length !== 11) {
        callback(new Error('请输入11位正确手机号'))
      } else if (!phone.test(value)) {
        callback(new Error('请输入正确手机号'))
      } else {
        callback()
      }
    }
    return {
      userlist: [],
      page: 1,
      limit: 10,
      tag: '',
      mobilePhone: '',
      password: '',
      dialogVisible: false,
      setPassword: false,
      form: {
        username: '',
        college: '',
        major: '',
        classes: '',
        mobilePhone: '',
        password: '',
        role: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          {
            min: 1,
            max: 12,
            message: '长度在 1 到 12 个字符',
            trigger: 'blur'
          }
        ],
        major: [
          { required: true, message: '请输入专业', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur'
          }
        ],
        // 自定义的校验
        mobilephone: [{ required: true, validatzor: checkmobilePhone, trigger: 'blur' }],
        classes: [
          { required: true, message: '请输入班级', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur'
          }
        ],
        college: [{ required: true, message: '请选择学院', trigger: 'change' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 17,
            message: '长度在 6 到 17 个字符',
            trigger: 'blur'
          }
        ],
        role: [{ required: true, message: '请选择身份', trigger: 'change' }]
      }
    }
  },
  methods: {
    //  用户信息模块
    async initStudnetList() {
      const { data: res } = await getStudentListAPI()
      this.userlist = res.data
    },

    onDialogClose() {
      // 添加表单的引用对象 去调用resetFields() 函数 即可重置表单
      this.$refs.myaddForm.resetFields()
    },
    // 用户点击了确认添加按钮
    onAddNewUser() {
      this.$refs.myaddForm.validate(async(valid) => {
        if (!valid) return
        // 需要执行 添加的业务处理
        const { data: res } = await getAddUsersAPI(
          this.form.username,
          this.form.college,
          this.form.major,
          this.form.classes,
          this.form.mobilePhone,
          this.form.password,
          this.form.role
        )
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.initStudnetList()
        } else if (res.code === 501) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'warning'
          })
        } else if (res.code === 502) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'warning'
          })
        } else if (res.code === 503) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'warning'
          })
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    async preservation(mobilePhone, e) {
      if ((e.target.value.length < 18) & (e.target.value.length >= 6)) {
        const { data: res } = await getChangePassword(
          mobilePhone,
          e.target.value
        )
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success'
          })
          e.target.value = ''
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          })
        }
      } else {
        this.$message({
          showClose: true,
          message: '修改失败,请检查密码长度',
          type: 'error'
        })
      }
    },
    async onRemove(mobilePhone) {
      const confirmResult = await this.$confirm('此操作将永久删除用户,是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') return this.$message.info('取消了删除')
      const { data: res } = await request.delete(`/adminSystem/removeUser/${mobilePhone}`, {
        // 取消预检请求 使用了 axios 的 headers 选项来取消预检请求。这样，就可以直接发起删除请求，不再需要先发起预检请求。
        headers: {
          'Access-Control-Request-Method': null
        }
      })
      if (res.code !== 0) return this.$message.error('删除失败!')
      this.$message.success('删除成功')
      this.initStudnetList()
    }
  },
  components: {}
}
</script>
<style spoced>
html {
  font-family: 'Orbitron', sans-serif;
}
.setPasswordBox {
  width: 100px;
  height: 100px;
  background-color: aqua;
}
.add {
  /* z-index: 100; */
  position: relative;
  top: 60px;
  left: 250px;
}
.table {
  position: relative;
  left: 245px;
  top: 70px;
}
.ipt {
  width: 150px;
  height: 24px;
}
.btn {
  width: 80px;
  height: 26px;
  background-color: #d5e5e6;
  border-radius: 3px;
  box-shadow: 0 2px 2px grey;
}
.modify {
  width: 180px;
  height: 26px;
  outline: #66b1ff;
  color: black;
  border-radius: 5px;
}
</style>
